import { PureComponent } from 'react';
import {
  Scene, OrthographicCamera, TextureLoader, BoxGeometry,
  MeshBasicMaterial, Mesh, WebGLRenderer, PointLight
} from 'three';

class Index extends PureComponent {

  async componentDidMount() {
    const scene = new Scene();

    const camera = new OrthographicCamera(-10, 10, 7.5, -7.5, 0.1, 100);
    camera.position.set(25, 25, 25);
    camera.lookAt(0, 0, 0);

    const geometry = new BoxGeometry(5, 5, 5);
    
    const light = new PointLight(0xffffff, 1, 1000);
    light.position.set(10, 15, 20);
    scene.add(light);

    const textureLoader = new TextureLoader();
    const materials = [];

    for (let i = 0; i < 6; i++) {
      const texture = await textureLoader.loadAsync(`/img/${i}.png`);
      materials.push(
        new MeshBasicMaterial({
          map: texture
        })
      );
    }
    //羡辙书中提到的MeshFaceMaterial已经被废弃了, 解决方法如下
    //Three.js - Using CubeTextureLoader to create a different image on each face of a cube
    //https://stackoverflow.com/questions/35877484/three-js-using-cubetextureloader-to-create-a-different-image-on-each-face-of-a
    const mesh = new Mesh(geometry, materials);
    scene.add(mesh);

    const renderer = new WebGLRenderer({
      canvas: document.getElementById('mainCanvas')
    });

    renderer.render(scene, camera);

  }

  render() {

    return (
      <canvas
        id="mainCanvas"
        width="400"
        height="300"
      />
    );
  }
}

export default Index;